<template>
  <div class="user" style="width: 70%;margin: auto">
    <div style="line-height: 50px; font-size: 30px; color: dodgerblue; margin-top: 20px;">忘记密码</div>
    <div style="background: #eeeeee;padding: 20px;margin-top: 30px">
      <div style="width: 74%;margin: auto;background: #ffffff;padding: 20px;">
        <el-form ref="userForm" :model="userForm" :rules="rules" label-width="100px" class="demo-userForm">
          <div class="title2">验证邮箱</div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="邮箱" prop="username">
                <el-input v-model="userForm.username" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮箱验证码" prop="code">
                <el-input v-model="userForm.code" />
              </el-form-item>
              <el-button class="code2" type="primary" :disabled="isDisabled" @click="getCode">{{ buttonText }}</el-button>
            </el-col></el-row>
          <el-form-item>
            <el-button v-if="usernameCodeCheck === false" type="primary" @click="submitForm('userForm')">验证邮箱</el-button>
            <el-button v-if="usernameCodeCheck === true" type="primary">验证成功</el-button>
            <el-button @click="onClose()">返回</el-button>
          </el-form-item>
        </el-form>
        <el-form v-if="usernameCodeCheck === true" ref="userForm" :model="userPasswordForm" :rules="rules2" label-width="100px" class="demo-userForm">
          <div class="title2">重置密码</div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="新密码" prop="newPass">
                <el-input v-model="userPasswordForm.newPass" autocomplete="off" type="password">
                  <i v-if="userPasswordForm.newPass !=='' && passwordPow > 1 " slot="suffix" style="color: #00ff00" class="el-input__icon el-icon-circle-check" /></el-input>
                <div class="asx" style="color: #aaaaaa">
                  6-16个包含字母、数字
                </div>
                <div v-if="userPasswordForm.newPass !==''">
                  <div v-if="passwordPow === 2" class="el-form-item__error" style="color: orange">
                    密码强度中
                  </div>
                  <div v-if="passwordPow === 3" class="el-form-item__error" style="color: #ffea38">
                    密码强度较高
                  </div>
                  <div v-if="passwordPow === 4" class="el-form-item__error" style="color: #00ff00">
                    密码强度高
                  </div></div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="确认密码" prop="newPassCheck">
                <el-input v-model="userPasswordForm.newPassCheck" autocomplete="off" type="password">
                  <i v-if="passwordIsCheck == true" slot="suffix" style="color: #00ff00" class="el-input__icon el-icon-circle-check" />
                </el-input>
                <div class="asx" style="color: #aaaaaa">
                  请再次输入密码
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type="primary" @click="submitPasswordForm('userForm')">修改密码</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { workCodeLogin, resetPasswordWork, getForget } from '@/api/user'
import { validEmail } from '@/utils/validate'
import md5 from 'js-md5'
import { setToken, setUsername } from '@/utils/auth'
export default {
  name: 'ForgetPasswordWork',
  components: {},
  data() {
    const validatePasswordCheck = (rule, value, callback) => {
      if (!value) {
        this.passwordIsCheck = false
        return callback(new Error('请再次填写密码'))
      } else if (value !== this.userPasswordForm.newPass) {
        this.passwordIsCheck = false
        return callback(new Error('两次密码不一致'))
      } else {
        this.passwordIsCheck = true
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      var modes = 0
      // 正则表达式验证符合要求的
      if (!value) {
        return callback(new Error('请输入密码'))
      } else if (value.length < 6) {
        this.passwordPow = 0
        return callback(new Error('请输入6位以上密码'))
      } else if (value.length > 15) {
        this.passwordPow = 0
        return callback(new Error('密码最大16位'))
      } else {
        if (value.length < 1) return modes
        // if (value.length > 6) modes++
        if (/\d/.test(value)) modes++ // 数字
        if (/[a-z]/.test(value)) modes++ // 小写
        if (/[A-Z]/.test(value)) modes++ // 大写
        if (/\W/.test(value)) modes++ // 特殊字符
        this.passwordPow = modes
        if (modes === 0) {
          return callback(new Error('密码强度弱'))
        } else {
          callback()
        }
      }
    }
    const validateMobile = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入用户名'))
      } else if (!validEmail(value)) {
        callback(new Error('请输入正确电子邮件地址'))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      passwordPow: 0,
      passwordIsCheck: false,
      usernameCodeCheck: false,
      buttonText: '发送验证码',
      flag: true,
      isDisabled: false, // 是否禁止点击发送验证码按钮
      userForm: {
        username: '',
        code: ''
      },
      userPasswordForm: {
        newPass: '',
        passwordCheck: ''
      },
      userInfoForm: [],
      rules: {
        username: [
          { required: true, trigger: 'blur', validator: validateMobile }
        ],
        code: [
          { required: true, message: '请填写验证码', trigger: 'blur' }
        ]
      },
      rules2: {
        newPass: [
          { required: true, validator: validatePassword }
        ],
        passwordCheck: [
          { required: true, validator: validatePasswordCheck }

        ]
      }
    }
  },
  created() {
  },
  methods: {
    getCode() {
      const that = this
      const timeStamp = parseInt(new Date().getTime() / 1000) + ''
      const t = md5(this.userForm.username + timeStamp)
      const signature = md5(t + 'rescue')
      const sendData = {
        username: that.userForm.username,
        signature: signature,
        timeStamp: timeStamp
      }
      getForget(sendData).then(response => {
        if (response.result === 0) {
          this.$message({
            message: '发送失败', type: 'error'
          })
        }
        if (response.result === 2) {
          this.$message({
            message: response.msg, type: 'error'
          })
        }
        if (response.result === 1) {
          this.$message({
            message: '已发送', type: 'success'
          })
          let time = 60
          this.buttonText = '已发送'
          this.isDisabled = true
          if (this.flag) {
            this.flag = false
            const timer = setInterval(() => {
              time--
              this.buttonText = time + ' 秒'
              if (time === 0) {
                clearInterval(timer)
                this.buttonText = '重新获取'
                this.isDisabled = false
                this.flag = true
              }
            }, 1000)
          }
        }
      })
    },
    // 验证手机号
    checkMobile(str) {
      const re = /^1(3\d|4[5-8]|5[0-35-9]|6[567]|7[01345-8]|8\d|9[025-9])\d{8}$/
      if (re.test(str)) {
        return true
      } else {
        return false
      }
    },
    submitForm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.loading = true
          // this.form.content = this.form.content.replaceAll(this.baseUrl, '')
          workCodeLogin(this.userForm).then(response => {
            if (response.result === 1) {
              setToken(response.data.token)
              setUsername(response.data.username)
              this.usernameCodeCheck = true
              this.$message({
                message: '提交成功', type: 'success'
              })
              // this.$router.push('/userInfoL')
            } else {
              this.$message({
                message: '提交失败', type: 'warning'
              })
            }
            this.loading = false
          })
        } else {
          return false
        }
      })
    },
    submitPasswordForm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.loading = true
          // this.form.content = this.form.content.replaceAll(this.baseUrl, '')
          resetPasswordWork(this.userPasswordForm).then(response => {
            console.log(response)
            if (response.result === 1) {
              this.$message({
                message: '修改成功', type: 'success'
              })
              this.$router.push('/login')
            } else {
              this.$message({
                message: '提交失败', type: 'warning'
              })
            }
            this.loading = false
          })
        } else {
          return false
        }
      })
    },
    onClose() {
      this.$router.push('/')
    }
  }
}
</script>
<style>
.user .el-textarea__inner {
  height: 300px !important;
}

.user .el-date-editor.el-input {
  width: 100% !important;
}

.user .el-select {
  width: 100% !important;
}
</style>
<style scoped>
.asx {
  font-size: 14px;
  line-height: 20px;
  margin-top: 5px
}

.title2 {
  line-height: 40px;
  font-size: 20px;
  color: darkgray;
  border-bottom: 1px #cccccc solid;
  margin-bottom: 20px;
}
.code2{
  position:absolute;
  right: 0;
  top: 0;
  height: 32px;

}
.procedure .grid-content :after {
  content: "";
  width: 135px;
  height: 2px;
  position: absolute;
  border: 2px dotted #f2ead8;
  margin-top: 54px;
  margin-left: 125px;
}
</style>
